<template>
    <div class="box">
        <!-- 1. 返回顶部 -->
        <div class="top"  v-show="top" @click="istop">
             <van-icon name="back-top" color="#f66"  size="30"  />
        </div>
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                top:false,//控制显隐
            }
        },
        mounted(){
         window.addEventListener("scroll",()=>{// 滚动事件
             let html =document.documentElement 
             if (html.scrollTop>=500) {//当滚动高度大于等于100返回顶部出现
                 this.top=true
             } else {
                 this.top=false
             }
         })
        },
        methods:{//3 加定时器的回顶效果
             istop(){
                //  document.documentElement.scrollTop=0
                 let html =document.documentElement 
                 var timer = setInterval(() => {
                     if (html.scrollTop<=0) {
                         clearInterval(timer)
                     }
                     html.scrollTop=html.scrollTop-20
                 }, 1);
             }
        }
    }
</script>
 
<style lang="scss" scoped>
.box{
    position: relative;
    .top{
        position: fixed;
        right: 20px;
        bottom: 60px;
        border-radius: 50%;
        padding: 5px;
        background: rgb(255, 255, 255);
        z-index: 9999;
    }
}
</style>